<template>
    <div class="cswd-dnld">
        <div class="user-div" :style="{ backgroundImage: `url(${userBj})` }">
            <div class="user-info">
                <div class="avater">
                    <div class="avater-img">
                        <img v-if="Info" :src="Info.avatar" alt="" />
                    </div>
                    <el-dropdown v-if="
                        userInfo && teacherInfo && userInfo.id == teacherId
                    " @command="handleCommand">
                        <span class="user-status">
                            <div :style="{
                                background: get_is_online_color(
                                    teacherInfo.major_is_online
                                ),
                            }" class="drop"></div>
                            {{
                                get_is_online_text(teacherInfo.major_is_online)
                            }}
                            <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="0">离线</el-dropdown-item>
                            <el-dropdown-item command="1">在线</el-dropdown-item>
                            <!-- <el-dropdown-item command="2"
                                >忙碌</el-dropdown-item
                            > -->
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span v-else-if="teacherInfo" class="user-status">
                        <div :style="{
                            background: get_is_online_color(
                                teacherInfo.major_is_online
                            ),
                        }" class="drop"></div>
                        {{ get_is_online_text(teacherInfo.major_is_online) }}
                    </span>
                </div>
                <div class="user-div-info">
                    <div v-if="Info" class="name">
                        {{ Info.nickname }}
                        <nuxt-link to="/user/myset">
                            <i v-if="
                                pageType == 't' &&
                                userInfo &&
                                teacherInfo &&
                                userInfo.id == teacherId
                            " class="el-icon-edit">&nbsp;编辑</i>
                        </nuxt-link>
                    </div>
                    <div v-if="pageType == 't' && teacherInfo.major_types" class="tags">
                        <div v-for="(
item, index
                            ) in teacherInfo.major_types.split(',')" :key="index">
                            {{ item }}
                        </div>
                    </div>
                    <div v-if="pageType == 't'" class="jieshao">
                        <div class="title">专业方向</div>
                        <div class="text">
                            {{ Info.major_direction }}
                        </div>
                    </div>
                    <div class="jieshao">
                        <div v-show="Info" class="title">
                            {{ pageType == "t" ? "老师介绍" : "个人介绍" }}
                        </div>
                        <div class="text">
                            {{ Info && Info.bio }}
                        </div>
                    </div>
                </div>
                <div v-if="
                    pageType == 't' && userInfo && userInfo.id != teacherId
                " class="user-div-buts">
                    <div class="but" :class="{ 'but1-active': is_focus == 1 }" @click="setFollow">
                        <span v-show="followSwitch">
                            <i v-show="is_focus == 1" class="el-icon-check"></i>
                            关注TA
                        </span>
                        <span v-show="!followSwitch">
                            <i class="el-icon-loading"></i>
                        </span>
                    </div>
                    <div :to="`/cswd/ask?id=${teacherId}`" @click="goMajor">
                        <div class="but2">
                            <i class="el-icon-chat-dot-square"></i>
                            在线提问
                        </div>
                    </div>
                </div>
                <div v-if="!userInfo" class="user-div-buts" @click="noLogin">
                    <div class="but">
                        <span>
                            <i v-show="is_focus == 1" class="el-icon-check"></i>
                            关注TA
                        </span>
                    </div>
                    <div class="but2">
                        <i class="el-icon-chat-dot-square"></i>
                        在线提问
                    </div>
                </div>
            </div>
        </div>

        <div class="main">
            <div v-if="pageType == 't'" class="tabs">
                <div class="tab" :class="{ active: tabsCurrent == 0 }" @click="tabsClick(0)">
                    TA的回答
                    <div class="line"></div>
                </div>
                <div class="tab" :class="{ active: tabsCurrent == 1 }" @click="tabsClick(1)">
                    评价{{ pjTotal == 0 ? "" : `(${pjTotal})` }}
                    <div class="line"></div>
                </div>
            </div>
            <div v-if="pageType == 'u'" class="tabs">
                <div class="tab" :class="{ active: tabsCurrent == 0 }">
                    TA的问答
                    <div class="line"></div>
                </div>
            </div>

            <div class="list">
                <!-- 回答 -->
                <template v-if="tabsCurrent == 0">
                    <div v-for="(item, index) in askList" :key="index" class="huida-item">
                        <nuxt-link :to="`/cswd/${item.id}.html`" target="_blank">
                            <div class="title">
                                <img src="~/assets/images/csjh/index/wen.png" alt="" />
                                <div class="title-text">
                                    {{ item.title }}
                                </div>
                            </div>
                            <div class="da">
                                <img :src="item.ans_avatar" alt="" />
                                <div class="info">
                                    <div class="info-text">
                                        {{ showMessage(item.first_answer) }}
                                    </div>
                                    <div class="time">
                                        {{ item.add_time_text }}
                                    </div>
                                </div>
                            </div>
                        </nuxt-link>
                    </div>
                    <div v-if="askList.length == 0" class="no-data">
                        <el-empty description="暂无数据"></el-empty>
                    </div>
                </template>
                <!-- 回答 end -->

                <!-- 评价 -->
                <template v-if="tabsCurrent == 1">
                    <div v-for="(item, index) in pjList" :key="index" class="pingjia-item">
                        <div class="pingjia-user-info">
                            <img :src="item.user_avatar" alt="" />
                            <div class="name-time">
                                <div class="name">{{ item.nickname }}</div>
                                <div class="time">
                                    {{
                                        item.createtime_text
                                            ? item.createtime_text
                                            : "系统默认好评！"
                                    }}
                                </div>
                            </div>
                        </div>
                        <div class="text">
                            {{ item.evaluate }}
                        </div>
                        <div class="rate">
                            <el-rate v-model="item.star" disabled text-color="#ff9900" score-template="{value}"
                                :colors="['#FFC847', '#FFC847', '#FFC847']">
                            </el-rate>
                        </div>
                    </div>
                </template>
                <!-- 评价 end -->

                <div class="page">
                    <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit"
                        :current-page.sync="page" @current-change="changePage">
                    </el-pagination>
                </div>
            </div>
        </div>

        <div v-if="sbshow" class="sb-showHuoDongModel">
            <div>
                <img src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/1306.png" alt=""
                    @click="set_payVipShow(true)" />
                <i class="el-icon-close" @click.stop="sbshow = false"></i>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getOtherUserHomeInfo,
    question_history,
    get_jianghu_answer,
    get_jianghu_evaluate,
    set_isonline,
    setFollow,
} from "@/assets/api/csjhApi";

import { getCouponList } from "@/assets/api/userCenterApi";

import { goTopSmooth } from "@/assets/utils/utils";

import { mapState, mapMutations } from "vuex";

import userBj from "@/assets/images/csjh/user-bj.png";

export default {
    async asyncData({ params, query }) {
        let data = {
            askList: [],
            teacherInfo: null,
            pageType: "",
            is_focus: 0,
            Info: null,
            teacherId: "",
            limit: 15,
            total: 0,
            page: 1,
        };

        if (params.id) data.teacherId = params.id.replace(".html", "");
        else data.teacherId = query.id;
        const res = await getOtherUserHomeInfo({
            uid: data.teacherId,
        });
        if (res.code == 1) {
            data.Info = res.data.info;
            data.is_focus = res.data.is_focus;
            if (res.data.info.is_major == 0) {
                const res2 = await question_history({
                    user_id: data.teacherId,
                    page: data.page,
                    pagesize: data.limit,
                });
                if (res2.code == 1) {
                    data.askList = res2.data;
                    if (res2.data.length > 0)
                        data.total = res2.data[0].allcount;
                }
                data.pageType = "u";
            } else {
                data.pageType = "t";
                data.teacherInfo = res.data;
                const res2 = await get_jianghu_answer({
                    user_id: data.teacherId,
                    page: data.page,
                    pagesize: data.limit,
                });
                if (res2.code == 1) {
                    data.askList = res2.data;
                    if (res2.data.length > 0)
                        data.total = res2.data[0].allcount;
                }
            }
        }
        return data;
    },
    components: {},
    head() {
        return {
            title: "小竹问答老师-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税问答,财税问答",
                },
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税问答栏目汇集众多税专家及财税专业导师，他们在财税领域有着丰富的实践经验和深厚的理论功底，能够及时准确的为广大财税从业者和学习者提供专业答疑服务。",
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            userBj: userBj,
            tabsCurrent: 0,
            rate: 3.7,

            Info: null,
            // pageType: "",
            // askList: [],
            pjList: [],
            pjTotal: 0,
            // teacherInfo: null,
            showMessage: function (first_answer) {
                if (first_answer && first_answer.length > 0) {
                    let messages = "";
                    for (let item of first_answer) {
                        let msg = JSON.parse(item.message);

                        if (msg.extendedData.type == 111)
                            messages = messages + "[表情]，";
                        else if (msg.extendedData.type == 11)
                            messages = messages + "[图片]，";
                        else
                            messages =
                                messages +
                                JSON.parse(item.message).message +
                                "，";
                    }
                    return messages;
                } else {
                    return "";
                }
            },

            get_is_online_color: function (is_online) {
                if (is_online == 0) return "#c2c2c2";
                else if (is_online == 1) return "#58c256";
                else if (is_online == 2) return "#ff6161";
            },
            get_is_online_text: function (is_online) {
                if (is_online == 0) return "离线";
                else if (is_online == 1) return "在线";
                else if (is_online == 2) return "忙碌";
            },

            // limit: 15,
            // total: 0,
            // page: 1,

            // is_focus: 0,

            funSwitch: true,
            followSwitch: true,

            major_types: "",

            // teacherId: "",

            couponList: [],

            sbshow: false,
        };
    },
    created() {
        // if (this.$route.params.id)
        //     this.teacherId = this.$route.params.id.replace(".html", "");
        // else this.teacherId = this.$route.query.id;
    },
    mounted() {
        goTopSmooth();
        this.get_major_detail(false);
        if (this.Info.is_major != 0) this.get_jianghu_evaluate(false);

        let token = localStorage.getItem("token");
        if (token) this.getCouponList();
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    methods: {
        ...mapMutations("common", ["setloginShow", "setmenuIndex", "set_payVipShow"]),

        async getCouponList() {
            const res = await getCouponList({
                status: 0,
                is_effective: 1,
            });
            if (res.code == 1) {
                this.couponList = res.data.list;
            }
        },

        async get_major_detail(is = true) {
            const res = await getOtherUserHomeInfo({
                uid: this.teacherId,
            });
            this.followSwitch = true;
            if (res.code == 1) {
                this.Info = res.data.info;
                this.is_focus = res.data.is_focus;
                if (res.data.info.is_major == 0) {
                    this.question_history();
                    this.pageType = "u";
                    return;
                } else {
                    this.pageType = "t";
                    this.teacherInfo = res.data;
                    if (is) {
                        this.get_jianghu_answer();
                        this.get_jianghu_evaluate(false);
                    }
                }
            }
        },

        async get_jianghu_answer() {
            const res = await get_jianghu_answer({
                user_id: this.teacherId,
                page: this.page,
                pagesize: this.limit,
            });
            if (res.code == 1) {
                this.askList = res.data;
                if (res.data.length > 0) this.total = res.data[0].allcount;
                goTopSmooth();
            }
        },

        async get_jianghu_evaluate(is = true) {
            const res = await get_jianghu_evaluate({
                user_id: this.teacherId,
                page: this.page,
                pagesize: this.limit,
            });
            if (res.code == 1) {
                this.pjList = [];
                for (let item of res.data.evaluatedatas) {
                    item.star = parseInt(item.star);
                    this.pjList.push(item);
                }
                if (is) this.total = res.data.evaluatedatas_count;
                this.pjTotal = res.data.evaluatedatas_count;
                goTopSmooth();
            }
        },

        async question_history() {
            const res2 = await question_history({
                user_id: this.teacherId,
                page: this.page,
                pagesize: this.limit,
            });
            if (res2.code == 1) {
                this.askList = res2.data;
                if (res2.data.length > 0) this.total = res2.data[0].allcount;
                goTopSmooth();
            }
        },

        tabsClick(index) {
            this.page = 1;
            this.tabsCurrent = index;
            if (index == 0) {
                this.get_jianghu_answer();
            } else if (index == 1) {
                this.get_jianghu_evaluate();
            }
        },

        changePage(page) {
            this.page = page;
            if (this.pageType == "u") {
                this.question_history();
            }
            if (this.pageType == "t") {
                if (this.tabsCurrent == 0) this.get_jianghu_answer();
                if (this.tabsCurrent == 1) this.get_jianghu_evaluate();
            }
        },

        // 关注/取消
        async setFollow() {
            if (!this.followSwitch) return;
            this.followSwitch = false;
            const res = await setFollow({
                uid: this.teacherId,
            });

            if (res.code == 1) {
                this.$message({
                    message: this.is_focus == 1 ? "取消关注" : "关注成功",
                    type: "success",
                });
                this.get_major_detail(false);
            }
        },

        // 修改状态
        async handleCommand(command) {
            if (!this.funSwitch) return;
            this.funSwitch = false;
            const res = await set_isonline({
                status: command,
            });
            this.funSwitch = true;
            if (res.code == 1) {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.get_major_detail();
            }
        },

        // 未登录点击
        noLogin() {
            if (!this.userInfo) {
                this.$confirm("需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
            }
        },

        goMajor() {
            if (this.userInfo.is_gpt_vip == 0 && this.couponList.length == 0) {
                this.$confirm(
                    " 该功能为会员专享，非会员可查阅精选问题",
                    "提示",
                    {
                        distinguishCancelAndClose: true,
                        confirmButtonText: "开通会员",
                        cancelButtonText: "去查询",
                    }
                )
                    .then(() => {
                        this.set_payVipShow(true);
                    })
                    .catch((action) => {
                        if (action === "cancel") {
                            this.$router.push({
                                path: "/cswd/jxhd/1",
                            });
                        }
                    });
                // this.sbshow = true;
                return;
            }
            if (this.teacherInfo.major_is_online == 0) {
                this.$confirm("当前老师不在线，是否继续提问", "确认信息", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "继续提问",
                    cancelButtonText: "取消",
                })
                    .then(() => {
                        this.$router.push({
                            path: `/cswd/ask?id=${this.teacherId}`,
                        });
                    })
                    .catch((action) => { });
            } else if (this.teacherInfo.major_is_online == 2) {
                this.$confirm("当前老师忙碌中，是否继续提问", "确认信息", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "继续提问",
                    cancelButtonText: "取消",
                })
                    .then(() => {
                        this.$router.push({
                            path: `/cswd/ask?id=${this.teacherId}`,
                        });
                    })
                    .catch((action) => { });
            } else {
                this.$router.push({
                    path: `/cswd/ask?id=${this.teacherId}`,
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.page {
    text-align: center;
    padding: 30px;
}

.user-div {
    background-size: 100% 100%;
}

.user-info {
    width: 1200px;
    height: 400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;

    .avater {
        width: 192px;
        text-align: center;

        .avater-img {
            width: 186px;
            height: 186px;
            border-radius: 186px;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        img {
            display: block;
            width: 176px;
            height: 176px;
            border-radius: 176px;
            object-fit: cover;
            cursor: pointer;
            transition-property: width, height, transform;
            transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
            // &:hover {
            //     transform: rotate(360deg);
            //     width: 187px;
            //     height: 187px;
            // }
        }

        .user-status {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #ffffff;

            .drop {
                width: 10px;
                height: 10px;
                border-radius: 10px;
                background: #4ed08d;
                margin-right: 5px;
            }

            i {
                color: #ffffff;
                font-size: 18px;
                margin-left: 4px;
            }
        }
    }
}

.user-div-info {
    margin-left: 60px;

    .name {
        font-size: 30px;
        font-weight: 500;
        color: #ffffff;
        margin-bottom: 9px;

        i {
            font-size: 14px;
            color: #c2cadc;
        }
    }

    .tags {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 16px;

        div {
            padding: 0 9px;
            height: 25px;
            line-height: 25px;
            background: #1367bc;
            border-radius: 0px 6px 0px 6px;
            font-size: 14px;
            color: #ffffff;
            margin-right: 12px;
            margin-top: 8px;
            text-align: center;
        }
    }

    .jieshao {
        margin-top: 10px;

        .title {
            height: 30px;
            font-size: 16px;
            font-weight: 700;
            color: #ffffff;
            line-height: 30px;
        }

        .text {
            margin-top: 5px;
            font-size: 14px;
            color: #bfc2ca;
            line-height: 24px;
        }
    }
}

.user-div-buts {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 80px;

    .but {
        min-width: 99px;
        text-align: center;
        cursor: pointer;
        padding: 0 20px;
        height: 48px;
        line-height: 48px;
        border-radius: 2px;
        border: 1px solid #ffffff;
        font-size: 18px;
        color: #ffffff;
        margin-left: 20px;

        i {
            font-size: 20px;
            padding-right: 2px;
            position: relative;
            top: 1px;
        }

        &:hover {
            opacity: 0.8;
        }
    }

    .but1-active {
        border-color: #ff8d1a;
        background-color: #ff8d1a;
        color: #ffffff;
    }

    .but2 {
        cursor: pointer;
        padding: 0 20px;
        height: 48px;
        line-height: 48px;
        border-radius: 2px;
        border: 1px solid #ffffff;
        font-size: 18px;
        color: #ffffff;
        margin-left: 20px;

        i {
            font-size: 20px;
            padding-right: 2px;
            position: relative;
            top: 1px;
        }

        &:hover {
            border-color: #ff8d1a;
            background-color: #ff8d1a;
            color: #ffffff;
        }
    }
}

.main {
    width: 1200px;
    margin: 35px auto;
}

.tabs {
    display: flex;
    align-items: flex-start;
    padding-bottom: 10px;
    padding-top: 20px;
    background-color: #ffffff;

    .tab {
        cursor: pointer;
        font-size: 16px;
        color: #333333;
        margin-left: 55px;

        .line {
            margin-top: 10px;
            background-color: #ffffff;
            width: 22px;
            height: 2px;
            position: relative;
            left: calc(50% - 11px);
        }
    }

    .active {
        color: #1c87f3;

        .line {
            background-color: #1c87f3;
        }
    }
}

.list {
    padding: 10px 45px;
    margin-top: 13px;
    background-color: #ffffff;
}

.huida-item {
    border-bottom: 1px solid #e8e8e8;
    padding-top: 34px;
    padding-bottom: 38px;
    cursor: pointer;

    .title {
        display: flex;
        align-items: center;

        img {
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }

        .title-text {
            white-space: nowrap;
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 文字用省略号替代超出的部分 */
            text-overflow: ellipsis;
            font-size: 16px;
            color: #333333;

            &:hover {
                text-decoration: underline;
            }
        }
    }

    .da {
        display: flex;
        align-items: center;
        margin-top: 25px;

        img {
            width: 48px;
            height: 48px;
            border-radius: 48px;
            object-fit: cover;
        }

        .info {
            padding-left: 15px;
            width: 1060px;

            .info-text {
                white-space: nowrap;
                /* 超出部分隐藏 */
                overflow: hidden;
                /* 文字用省略号替代超出的部分 */
                text-overflow: ellipsis;
                font-size: 16px;
                color: #666666;
                margin-bottom: 10px;
            }

            .time {
                font-size: 14px;
                color: #999999;
            }
        }
    }

    &:hover {
        .title-text {
            color: #ff6f1d;
        }
    }
}

.pingjia-item {
    border-bottom: 1px solid #e8e8e8;
    padding-top: 30px;
    padding-bottom: 34px;
    position: relative;

    .pingjia-user-info {
        display: flex;
        align-items: center;

        img {
            width: 60px;
            height: 60px;
            border-radius: 60px;
        }

        .name-time {
            padding-left: 17px;

            .name {
                font-size: 16px;
                color: #666666;
            }

            .time {
                padding-top: 6px;
                font-size: 14px;
                color: #999999;
            }
        }
    }

    .text {
        line-height: 24px;
        font-size: 18px;
        color: #333333;
        padding-top: 10px;
        padding-left: 78px;
    }

    .rate {
        position: absolute;
        right: 3px;
        top: 47px;
    }
}

.el-icon-check {
    padding-right: 3px;
}

.no-data {
    text-align: center;
    padding: 20px 0;
}

.sb-showHuoDongModel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;

    >div {
        position: relative;
        cursor: pointer;

        i {
            color: #ffffff;
            font-size: 34px;
            position: absolute;
            top: 18px;
            right: 15px;
        }
    }

    img {
        width: 387px;
        height: auto;
    }
}
</style>
